<template>
  <!-- 日榜 周榜 月榜 +日期   -->
  <div id="popup">
    <div class="bgbox">
      <van-dropdown-menu active-color="#1779ff" v-if="show == 'month'">
        <van-dropdown-item ref="ref" :title="title" @close="emit">
          <van-cell>
            <template>
              <button
                :class="[active == '日榜' ? 'active' : '']"
                class="num"
                @click="list('日榜')"
              >
                日榜
              </button>
              <button
                class="num"
                :class="[active == '周榜' ? 'active' : '']"
                @click="list('周榜')"
              >
                周榜
              </button>
              <button
                class="num"
                :class="[active == '月榜' ? 'active' : '']"
                @click="list('月榜')"
              >
                月榜
              </button>
            </template>
          </van-cell>
        </van-dropdown-item>
      </van-dropdown-menu>
      <!-- 周 -->
      <van-dropdown-menu active-color="#1779ff" v-if="show == 'week'">
        <van-dropdown-item ref="ref" :title="title" @close="emit">
          <van-cell>
            <template>
              <button
                class="num"
                :class="[active == '日榜' ? 'active' : '']"
                @click="list('日榜')"
              >
                日榜
              </button>
              <button
                class="num"
                :class="[active == '周榜' ? 'active' : '']"
                @click="list('周榜')"
              >
                周榜
              </button>
            </template>
          </van-cell>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-dropdown-menu class="after" v-if="show == 'day'" :overlay="false">
        <van-dropdown-item title="日榜" />
      </van-dropdown-menu>
      <!-- 时间 -->
      <van-dropdown-menu class="select" active-color="#1779ff">
        <van-dropdown-item
          v-model="value"
          :options="formatwdate"
          @close="emit1"
        />
      </van-dropdown-menu>
      <slot></slot>
    </div>
    <!-- <div></div> -->
  </div>
  <!-- </div> -->
</template>

<script>
export default {
  props: ["show"],
  data() {
    return {
      time: [false, false, false],
      title: "日榜",
      formatwdate: [], //日期
      value: "",
      total: "总量",
      active: "日榜", //判断选中哪个日榜、周、月
      newvalue: [],
      endDate: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.day();
  },
  watch: {},
  methods: {
    //周
    getTime(n) {
      var myDate = new Date();
      var weekDate = new Date(myDate.getTime() - n * 24 * 3600 * 1000); // 计算开始时间用
      var weekDate2 = new Date(myDate.getTime() - n * 24 * 3600 * 1000); // 计算结束时间用
      var day = weekDate.getDay();
      var time = weekDate.getDate() - day + (day === 0 ? -6 : 1);
      var startDate = new Date(weekDate.setDate(time));
      //  测试开始 月份日期是否大于10?  //
      var beginm = startDate.getMonth() + 1;
      var begind = startDate.getDate();
      if (beginm < 10) {
        beginm = "0" + beginm;
      }
      if (begind < 10) {
        begind = "0" + begind;
      }
      //  页面渲染 03月11  //
      var beginTime = beginm + "月" + begind + "日";
      //  测试结束 月份日期是否大于10?  //
      var endDate = new Date(weekDate2.setDate(time + 6));
      var endm = endDate.getMonth() + 1;
      var endd = endDate.getDate();
      if (endm < 10) {
        endm = "0" + endm;
      }
      if (endd < 10) {
        endd = "0" + endd;
      }
      var endTime = endm + "月" + endd + "日";
      return beginTime + "-" + endTime;
    },
    //上个月最后一天
    month1() {
      var nowdays = new Date();
      var year = nowdays.getFullYear();
      var month = nowdays.getMonth();
      if (month == 0) {
        month = 12;
        year = year - 1;
      }
      if (month < 10) {
        month = "0" + month;
      }

      var myDate = new Date(year, month, 0);

      // var startDate = year + '-' + month + '-01 00:00:00'; //上个月第一天
      var endDate = myDate.getDate(); //上个月最后一天
      this.endDate = endDate;
    },
    //月
    month() {
      for (var i = 1; i < 4; i++) {
        var nowdate = new Date();
        nowdate.setMonth(nowdate.getMonth() - i);
        var y = nowdate.getFullYear();
        var m = nowdate.getMonth() + 1;
        var d = nowdate.getDate();
        var lastDay = new Date(y, m, 0);
        if (m < 10) {
          m = "0" + m;
        }
        if (d < 10) {
          d = "0" + d;
        }
        var formatwdate = y + "-" + m;

        var newvalue =
          y +
          "-" +
          m +
          "-" +
          "01" +
          "-" +
          y +
          "-" +
          m +
          "-" +
          lastDay.getDate();
        this.newvalue.push(newvalue);
        var text = {
          text: y + "年" + "-" + m + "月",
          value: y + "-" + m,
        };
        this.formatwdate.unshift(text);
      }
      this.value = this.formatwdate[2].value;
    },
    //
    getDay(day) {
      var today = new Date();
      let h = today.getHours();
      let m = today.getMinutes();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return [tMonth + "月" + tDate + "日", tMonth + "-" + tDate];
      // console.log( + tDate);
    },
    // 补0
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    //日
    day() {
       var today = new Date();
      let h = today.getHours();
      let m = today.getMinutes();
       var i 
      if (h > 15 || (h == 15 && m >= 30)) {
        var i = 1;
      } else {
        i = 2;
      }

      var dd;
      if(i==2){
          for (i; i <= 8; i++) {
        dd = this.getDay(-i)[0];
        var text = {
          text: dd,
          value: this.getDay(-i)[1],
        };
        this.formatwdate.push(text);
        this.value = this.formatwdate[0].value;
      }
      }else{
         for (i; i < 8; i++) {
        dd = this.getDay(-i)[0];
        var text = {
          text: dd,
          value: this.getDay(-i)[1],
        };
        this.formatwdate.push(text);
        this.value = this.formatwdate[0].value;
      }
      }
     
    },
    //点击周榜切换
    list(i) {
      this.active = i;
      this.title = i;
      this.$refs.ref.toggle(); //关闭弹窗
      if (i == "日榜") {
        this.formatwdate = [];
        this.day();
      } else if (i == "周榜") {
        this.formatwdate = [];
        var time = this.getTime(7); //上周
        this.value = time;
        var text = { text: time, value: time };
        this.formatwdate.push(text);
        var time1 = this.getTime(14); //上上周
        var text1 = { text: time1, value: time1 };
        this.formatwdate.push(text1);
        var time2 = this.getTime(21); //上上上周
        var text2 = { text: time2, value: time2 };
        this.formatwdate.push(text2);
      } else if (i == "月榜") {
        this.formatwdate = [];
        this.month();
      }
    },

    //数据传给父组件
    emit() {
      this.$emit("formatwdate", this.title, this.value);
    },
    emit1(i) {
      if (this.title == "月榜") {
        let time1 = this.newvalue.filter((item) => {
          return item.substring(0, 7) == this.value ? item : "";
        });
        this.$emit("formatwdate1", this.value, ...time1);
      } else {
        this.$emit("formatwdate1", this.value);
      }
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.active {
  background: #1779ff !important;
  color: #fff !important;
}
#popup {
  width: 100%;
  height: 1.0667rem;
  border-top: 1px solid #e5e5e5;
  // background: #f1f1f1;
  > .bgbox {
    width: 100%;
    height: 1.0667rem;
    display: flex;
    align-items: center;
    background: #fff;
    justify-content: space-around;
  }
  .num {
    // padding: .266667rem .386667rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-right: 0.266667rem;
    margin-bottom: 0.266667rem !important;
    border-radius: 0.133333rem;
    border: solid 1px #e5e5e5;
    background: #f1f1f1;
    color: #666666;
    line-height: 0.853333rem;
  }
  .num:hover {
    color: #fff;
    background: #1779ff;
  }
  .select1 {
    font-size: 0.373333rem;
    color: #fff !important;
    background-color: #1779ff !important;
    border: 1px solid #1779ff;
  }
  .select {
    flex: 2.3;
    width: 13.333333rem;
  }
}
</style>
